<template>
  <div>
    <el-container>

      <!--   导航条 开始  -->
      <el-header style="text-align: right; font-size: 14px">
        <el-row>
          <el-col :span="6" :pull="2" >
              <strong style="margin-right: 800px;" ><span style="font:20px Extra large">应学视频APP后台管理系统统</span></strong>
          </el-col>
          <el-col :span="4" :offset="14">
              <span><span style="font:20px Extra large">{{ admin.username }}</span></span>
              <el-dropdown>
                <i class="el-icon-setting" style="margin-right: 15px"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-if="admin.username!=='游客'"><a href="javascript:" @click="logout">退出系统</a>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="admin.username==='游客'"><a href="#/login">点我登录</a></el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <!--   导航条 结束  -->

      <!--  容器    -->
      <el-container>

        <!--   左边的选项框   开始    -->
        <el-aside width="220px" align="center" >
          <el-menu :default-openeds="['1']" background-color="#545c64" text-color="pink" active-text-color="#ffd04b">

            <el-submenu index="1">
              <template slot="title"><i class="el-icon-s-home"></i>主页</template>
              <el-menu-item index="1-1">
                <router-link to="/mainView"><el-button type="success">回到主页</el-button></router-link>
              </el-menu-item>
            </el-submenu>

            <el-submenu index="2">
              <template slot="title"><i class="el-icon-user-solid" ></i>用户管理</template>
              <el-menu-item index="2-1">
                <router-link to="/showUser"><el-button type="success">用户信息</el-button></router-link>
              </el-menu-item>
              <el-menu-item index="2-2">
                <router-link to="/echartsGoEasy" ><el-button type="warning">用户统计</el-button></router-link>
              </el-menu-item>
<!--              <el-menu-item index="2-3">
                <router-link to="/sendPhone" ><el-button type="warning">发送手机验证码</el-button></router-link>
              </el-menu-item>-->
            </el-submenu>

            <el-submenu index="3">
              <template slot="title"><i class="el-icon-ice-tea"></i>类别管理</template>
              <el-menu-item index="3-1">
                <router-link to="/showCategory"><el-button type="warning">类别信息</el-button></router-link>
              </el-menu-item>
            </el-submenu>

            <el-submenu index="4">
              <template slot="title"><i class="el-icon-trophy"></i>视频管理</template>
              <el-menu-item index="4-1">
                <router-link to="/showVideo"><el-button type="warning">视频管理</el-button></router-link>
              </el-menu-item>
              <el-menu-item index="4-2">
                <router-link to="/searchVideo"><el-button type="warning">视频搜索</el-button></router-link>
              </el-menu-item>
            </el-submenu>

            <el-submenu index="5">
              <template slot="title"><i class="el-icon-ship"></i>反馈管理</template>
              <el-menu-item index="5-1">
                <router-link to="/showFeedback"><el-button type="warning">反馈管理</el-button></router-link>
              </el-menu-item>
            </el-submenu>

          </el-menu>
        </el-aside>
        <!--   左边的选项框   结束    -->

        <!--    中心内容    -->
        <el-main>
          <!-- 中心内容 -->
          <router-view></router-view>
        </el-main>

      </el-container><br>

      <!--   页脚   -->
      <el-footer align="center">zparkhr@zhangcn.cn</el-footer>
    </el-container>

  </div>
</template>

<script>

import instance from "../util/request";

export default {
  name: "Main",
  data() {
    return {
      admin: {}, //获取用户对象
      color: 'rgba(19, 206, 102, 0.8)'
    }
  },
  methods: {
    logout: function () {  //触发退出方法

      //向后台发起退出请求
      instance.get("/admin/logout")
        .then(response => {
          //移除登录标记
          localStorage.removeItem("token");

          //给用户名重新赋值
          this.admin.username = '游客';
        })
        .catch(error => this.$message.error('操作异常,请稍后再试!'));
    },
    userInfo() {//获取登录用户信息
      getUser().then(res => {
        //根据token获取用户数据
        this.admin.username = res.data.username;
      }).catch(error => {
        console.log(error)
      });
    }
  },
  created(){

    //获取用户登录标记
    let token = localStorage.getItem("token");

    //判断用户是否有登录标记
    if(token!=null){
      this.admin.username=token;
      //向后台发起退出请求
      instance.post("/admin/queryToken",{"token":token})
        .then(response=>{
          //给用户名重新赋值
          this.admin = response.data;
        })
        .catch(error => this.$message.error('操作异常,请稍后再试!'));
    }else{
      this.admin.username="游客";
      //没有登录标记跳转至login组件
      this.$router.push({name: 'Login'});
    }

  }
}
</script>

<style scoped>
.el-header {
  background-color: paleturquoise;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: bisque;
}

.box {
  display: flex;
  height: 100vh;
}

</style>
